<template>
	<div id="app1">
		<transition name="bfade" mode="in-out">
			<router-view :msgTest="msg"></router-view>			
		</transition>
		<audio :src="musicSrc" autoplay></audio>
	</div>
</template>

<script>
	import jsonp from "jsonp"
	export default {
		name: "app",
		data() {
			return {
				msg:"nihao",
			}
		},
		computed:{
			musicSrc(){
				return this.$store.state.curSong;
			},
			bofo(){
				return this.$store.state.bof;
			}
		},
		watch:{
			bofo(a,b){
				var audios = document.querySelector("audio");
				if(audios && a){
					audios.play();
				}else{
					audios.pause();
				}
			}
		},
		components: {
			
		},
		created(){
			
		}
	}
</script>

<style>
html,body{
	height: 100%;
}
	#app1{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
	.bfade-enter-active,
	.bfade-leave-active {
		transition: all .4s;
		transform: translateY(0%);
	}
	
	.bfade-enter {
		transition: all .4s;
		transform: translateY(100%);
	}
	
	.bfade-leave-to {
		transition: all .4s;
		transform: translateY(-100%);
	}
</style>